import { formatDate } from '@src/assets/js/tool'
import style from './index.module.less'
import { push } from '@src/redux/reducers/pages'
import { Button } from 'antd-mobile'
import { useAppDispatch } from '@src/redux/hook'

// 渲染仲裁员选择结果行
function Line ({ name, date, isThief = false }) {
  const selected = name !== null && name !== undefined && name !== ''
  const time = typeof date === 'number' ? formatDate(date, 'YYYY-MM-DD') : ''
  return (
    <div className={style.line}>
      <span>
        <span className={style.label}>{isThief && '首席'}仲裁员</span>
        <span>{selected ? name : '未选定'}</span>
      </span>
      <span className={style.time}>{time}</span>
    </div>
  )
}

// 渲染边裁结果
function NormalLine ({ data }) {
  if (data.tribunal_type !== '三人庭') {
    return <span />
  }
  return <Line name={data.arbitrator1} id={data.arbitratorid1} date={data.arbitrator1_sel_datetime} />
}

// 渲染选择仲裁员按钮
function SubLine ({ data, caseid }) {
  const dispatch = useAppDispatch()
  if (data.status === '完成') {
    return <span />
  }
  return (
    <div className={style['btn-line']}>
      <Button color='primary' size='small' onClick={() => { dispatch(push({ element: 'selectArbitrator', meta: { caseid, id: data.id } })) }}>录入仲裁员</Button>
    </div>
  )
}

function Main ({ data, index, caseid }) {
  return (
    <div className={style.container}>
      <div className={style.inner}>
        <div className={style.order}>{index + 1}</div>
        <div className={style.content}>
          <div className={style.title}>
            <div>{data.party_name}选定</div>
          </div>
          <div className={style.list}>
            <Line name={data.arbitrator} id={data.arbitratorid} date={data.arbitrator_sel_datetime} isThief={data.tribunal_type === '三人庭'} />
            <NormalLine data={data} />
            <SubLine data={data} caseid={caseid} />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Main
